<template>
  <view class="component">
    <view class="image">
      <view class="title">上传图片:</view>
      <view class="list">
        <!--<upload :limit="10" :size="120" :fileList1="item.image" @upload="upload" />-->
        <upload :limit="10" :size="120" :fileList1="item.image" />
      </view>
    </view>
    <u--form
        labelPosition="left"
        :model="item"
        :rules="rules"
        ref="uForm"
        class="form"
        labelWidth="140rpx"
        labelAlign="right"
        :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
    >
      <u-form-item borderBottom label="标题:" prop="title">
        <u--input
            v-model="item.title"
            border="none"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item borderBottom label="价格:" prop="price">
        <u--input
            v-model="item.price"
            border="none"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item borderBottom label="编码:">
        <u--input
            v-model="item.sn"
            border="none"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item borderBottom label="起购数量:">
        <u--input
            v-model="item.buy_quantity"
            border="none"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
      <u-form-item borderBottom label="库存:">
        <u--input
            v-model="item.stock"
            border="none"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
        ></u--input>
      </u-form-item>
    </u--form>
    <view class="ops">
      <view class="button">
        <u-button type="primary" text="保存" size="small" @click="update"></u-button>
      </view>
      <view class="button">
        <u-button type="error" text="删除" size="small" @click="remove"></u-button>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import config from '../../../config/config'
import Supplier from '../../../api/supplier'
const model = new Supplier()

import Upload from './Upload'

export default {
  components: {
    Upload
  },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        title: {
          type: 'string',
          required: true,
          message: '请填写标题',
          trigger: ['blur', 'change']
        },
        sort: {
          price: 'number',
          required: true,
          message: '请填写价格',
          trigger: ['blur', 'change']
        }
      },
      imageList: [],
    }
  },
  created() {
    // console.log(this.item)
  },
  methods: {
    update() {
      this.$refs.uForm.validate().then(res => {
        if (res) {

          let image = []
          if (this.item.image.length > 0) {
            image = this.item.image.map(x => x.id)
          }

          let property = []
          let sku = []

          let commissionDiff = {}

          model.editProduct({
            ...this.item,
            area_id: [3],
            image,
            property,
            sku,
            commissionDiff,
          }).then(() => {
            this.$refs.uToast.show({
              type: 'success',
              message: '操作成功',
              duration: 500,
              iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
              complete: () => {
                this.$emit('submit')
              }
            })
          }).catch(e => {
            this.$refs.uToast.show({
              // type: 'success',
              message: e,
              duration: 500,
            })
          })
        }
      }).catch(e => {
        // console.log(e)
      })
    },
    remove() {
      this.$emit('delete', { id: this.item.id })
    },
    upload(list) {
      // console.log(list)
      // this.$set(this.item, 'image', list)
    }
  }
}
</script>

<style scoped lang="scss">

.component {
  background: white;
  min-height: 300px;
  padding: 20rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .form {
    //background: red;
  }
  .ops {
    display: flex;
    margin-top: 10px;
    justify-content: center;
    .button {
      //flex: 1;
      padding: 0 10px;
    }
  }
  .image {
    //background: red;
    border-bottom: 1rpx solid #ebebec;
    .title {
      height: 30px;
      font-weight: 700;
    }
    .list {
      padding-bottom: 10px;
    }
  }
}
</style>
